<template>
  <div>
    <!-- Form -->
    <el-button type="NewlyBuild" @click="dialogFormVisible = true" icon="el-icon-plus">新建</el-button>
    <el-dialog title="新建中央动态" :visible.sync="dialogFormVisible" width="530px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!--标题-->
        <div class="biaoti">
          <el-form-item label="标题：" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <span class="addFirst" @click="addList">添加</span>
        </div>

        <!--分类-->
        <div class="fenlei" v-for="(item,index) in fList" :key="index">
          <el-form-item label="分类：" prop="type">
            <el-select v-model="item.type" placeholder="请选择分类">
              <el-option
                v-for="item in list"
                :key="item.index"
                :label="item.itemName"
                :value="item.itemValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <!--本地图片选择-->
          <div class="pic-box">
            <h1 class="h1-1">选择图片：</h1>
            <Upload :ruleForm.sync="ruleForm"></Upload>
          </div>
          <!--图片提示文字及边框-->
          <div class="flex-box">
            <div class="pic-Tips">
              <h1>1.请上传PNG、JPG或者JPEG图片，大小不超过10MB; ;</h1>
              <h1>2.图片尺寸约为1200*120px；</h1>
            </div>
          </div>
          <!--链接-->
          <el-form-item label="链接：" prop="url">
            <el-input v-model="item.url" placeholder="请输入链接"></el-input>
          </el-form-item>
        </div>
      </el-form>

      <!--结束-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
  props: ["id"],
  components: {
    Upload,
  },
  data() {
    return {
      //文本框
      textarea200: "",
      // 分类列表
      list: [],
      dialogFormVisible: false,
      ruleForm: {
        title: "",
        type: "",
        pic: "",
        url: "",
      },
   fList:[{
    
        type: "",
        pic: "",
        url: "",
   }],
      rules: {
        name: [
          { required: true, message: "请输入图片名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "blur" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
      },
    };
  },
  props: ["get"],
  created() {
    this.Api.getClassify({
      typeCode: "ZYDT_SORT_LEVREL1",
    }).then((res) => {
      this.list = res.data;
      console.log(this.list);
      // console.log(this.list);
    });
  },
  methods: {
    addList(){
   this.fList.push({
       type: "",
        pic: "",
        url: "",
   })
    },
    // 提交
    sure() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.Api.newCenter({
            id: "",
            title: this.ruleForm.title,
            exList: [
              {
                id: "",
                patrolId: "",
                type: this.ruleForm.type,
                pic: this.ruleForm.pic,
                url: this.ruleForm.url,
              },
            ],
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success("新建成功");
              this.$refs["ruleForm"].resetFields();

              this.get();
              location.reload();
              this.dialogFormVisible = false;
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.biaoti {
  display: flex;
}
.addFirst {
  width: 70px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  background: white;
  color: #3d7fff;
  border-radius: 4px;
  margin-top: 2px;
  border: 1px solid #3d7fff;
  margin-left: 10px;
}
.fenlei{
  
}
/deep/.el-button--NewlyBuild {
  width: 80px;
  height: 36px;
  background: rgba(61, 127, 255, 1);
  border-radius: 3px;
  padding: 0;
  color: white;
  margin-right: 10px !important;
}
/deep/.el-dialog__wrapper {
  z-index: 9999 !important;
  .el-dialog {
    .el-dialog__header {
      background: rgba(230, 233, 237, 1);
      border-radius: 8px 8px 0px 0px;
      border: 1px solid rgba(230, 233, 237, 1);
      padding: 11px 20px 11px 24px;
      .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
      }
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .el-dialog__body {
      padding: 30px 43px 0 42px;
      .el-form {
        .el-form-item {
          margin: 0 0 16px 0;
          .el-form-item__label {
            width: 85px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0;
          }
          .el-form-item__content {
            margin-left: 85px !important;
            .el-input__inner {
              width: 260px;
              height: 36px;
              background: rgba(255, 255, 255, 1);
              border-radius: 4px;
              border: 1px solid rgba(221, 221, 221, 1);
              padding-left: 12px;
            }
          }
        }
        .pic-box {
          display: flex;
          padding-bottom: 10px;
          .h1-1 {
            width: 85px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: right;
          }
          .h1-1::before {
            content: "* ";
            color: #ff0000;
          }
        }
        .flex-box {
          display: flex;
          justify-content: flex-end;

          .pic-Tips {
            width: 360px;
            padding-top: 6px;
            padding-bottom: 15px;
            border-top: 1px solid #dddddd;
            h1 {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 22px;
            }
          }
        }
      }
    }
    .el-dialog__footer {
      padding: 30px 30px 26px;
      .dialog-footer {
        .el-button--default {
          width: 70px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(215, 219, 224, 1);
          padding: 0;
          color: rgba(51, 51, 51, 1);
        }
        .el-button--primary {
          width: 70px;
          height: 36px;
          background: rgba(61, 127, 255, 1);
          border-radius: 3px;
          padding: 0;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
/**图片上传大小修改88px */
/deep/.el-upload--picture-card {
  width: 88px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-upload-list__item {
  width: 88px;
  height: 88px;
  margin-right: 0px;
}
/deep/.el-icon-zoom-in {
  font-size: 19px;
}
/deep/.el-icon-download {
  font-size: 19px;
}
/deep/.el-icon-delete {
  font-size: 19px;
}
.upload-box {
  width: 88px;
  height: 88px;
  overflow: hidden;
  ul {
    li {
      div {
        > span {
          display: flex;
        }
      }
    }
  }
}
</style>